<template>
	<view class="citySelect" v-if="level">
		<view class="close" v-if="showClose" >
			<uv-icon name="close" color="#fff" size="36rpx" bold @click="close" />
		</view>
		<view class="tab-box">
		
		<!-- <uv-tabs :list="tabsList" @click="tabsClick" :current="current" lineColor="red" /> -->
		<tui-tabs :tabs="tabsList" :currentTab="current" @change="tabsClick" sliderBgColor="red" selectedColor="red"></tui-tabs>
		
		
		</view>
		<view class="box">
			
			<view class="list" v-if="loading">
			    <view v-for="(e, i) in newList" :key="e.id">
					<view :class="['title', isSelech(e.id)]" @click="selechClick(e, i)">{{ e.title }}</view>
				</view>
				<view class="" v-if="newList.length === 0" style="margin-top: 200rpx;">
					<uv-empty mode="address" text="暂无数据" />
				</view>
			</view>
			<view v-else class="loading">
				<uv-loading-icon text="加载中" vertical/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { getRegionsList, getCommunityList, getCityLv3 } from '@/api'
	
	const props = defineProps({
		init: { type: Array, default: [] },
		level: { type: Number, default: 3 },
		showClose: { type: Boolean, default: false }
	})
	const emit = defineEmits(['select'])
	
	const list = ref([])
	const current = ref(0)
	const tabsList = ref([])
	const community = ref([])
	const loading = ref(false)
	const communityId = ref(-1)
	
	
	const newList = computed(() => {
		if(props.level === 5 && current.value === 4) return community.value
		if(current.value ===  props.level) return []
		if (current.value === 0) return list.value
		let currentData = list.value
		for (let i = 0; i < current.value; i++) {
			const selectedIndex = tabsList.value[i]?.i
			currentData = currentData[selectedIndex]?.child || []
		}
		return currentData
	})
	
	// 判断当前是否选中
	const isSelech = (id) => {
		return id === tabsList.value[current.value]?.id ? 'active' : ''
	}
	
	// tabs切换点击
	const tabsClick = (e) => {
		if(e.disabled) return
		current.value = e.index
	}
	
	// 选择城市
	const selechClick = async (e, i) => {
		for (var index = 0; index < props.level; index++) {
			if(index >= current.value) tabsList.value[index] = { id: -1, i: 0, name: '请选择', disabled: true }
		}
		tabsList.value[current.value].i = i
		tabsList.value[current.value].id = e.id
		tabsList.value[current.value].name = e.title
	    tabsList.value[current.value].disabled = false
		if(current.value < (props.level - 1)) current.value++
		if(current.value === (props.level - 1) && tabsList.value[current.value].id > -1) close()
		
		
		if(communityId.value && current.value === 4 && tabsList.value[current.value].id > -1) return

		if(props.level === 5 && current.value === 4) {
			loading.value = false
			community.value = []
			communityId.value = e.id
			const { result } = await getCommunityList({ town_id: e.id})
			if(result && result.length > 0) {
				community.value = result.map(e => ({ id: e.id, title: e.name }))
			}
			loading.value = true
		} else {
			community.value = []
			communityId.value = -1
		}
	}
	
	// 关闭/回传数据
	const close = () => {
		if(!loading.value) return
		const index = tabsList.value.findIndex(e => e.id === -1)
		const data = tabsList.value.map(e => ({ id: e.id, name: e.name, index: e.i }))
		emit('select', index === -1 ? data : false)
	}
	
	// 初始化选择
	const initProcessing = async () => {
		if(props.level === 5) {
			community.value = []
			const town_id = props.init[props.init.length - 2]
			communityId.value = town_id
			const { result } = await getCommunityList({ town_id })
			community.value = result.map(e => ({ id: e.id, title: e.name }))
		}
		for (let i = 0; i < props.init.length; i++) {
			const id = props.init[i]
			const index = newList.value.findIndex((e => e.id == id))
			if(index === -1) break
			tabsList.value[i].i = index
			tabsList.value[i].disabled = false
			tabsList.value[i].id = newList.value[index].id
			tabsList.value[i].name = newList.value[index].title
			if(i < props.init.length - 1) current.value++
		}
	}
	
	// 初始化
	const init = async () => {
		// 这里改成 new Array().fill().map，避免小程序 Array.from 兼容性问题
		console.log('---props.level----',props.level)
		tabsList.value = Array.from({ length: Number(props.level) }, () => ({
		  id: -1,
		  i: 0,
		  name: '请选择',
		  disabled: true
		}))
		
			
		console.log('---tabsList.value---',tabsList.value)
	
		// 默认第一个 tab 可选
		if (tabsList.value.length > 0) {
			tabsList.value[0].disabled = false
		}
	
		let result
		if (props.level === 3) {
			result = (await getCityLv3()).result
		} else {
			result = (await getRegionsList()).result
		}
		list.value = result
	
		// 如果有初始值，处理默认选中
		if (props.init.length > 0) {
			await initProcessing()
		}
	
		loading.value = true
	}
	
	init()
</script>

<style lang="scss" scoped>
	.citySelect {
		height: 100%;
		display: flex;
		overflow: hidden;
		flex-direction: column;
		
		
	}
	.close {
		position: fixed;
		bottom: 200rpx;
		right:60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 0, 0, 0.5);
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		
	}
	
	.box {
		flex: 1;
		display: flex;
		overflow: hidden;
		flex-direction: column;
		padding: 0 10upx;
		.list {
			flex: 1;
			overflow: auto;
			.title {
				color: #333;
				font-size: 28rpx;
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				border: 1px solid #eee;
			}
			.active {
				color: #C74A3C;
			}
		}
	}
	
	.loading {
		height: 50%;
		display: flex; 
		align-items: center;
		justify-content: center;
	}
	
	     .tab-box{
		
	}
</style>
